<template>
    <div class="main">
        <div class="mainView">
            <div class="closeImg" @click="handleClose()">
                <img src="../../../assets/images/logout.png">
            </div>
            <router-view />
        </div>
        <div class="footer">
            <van-tabbar :route="true">
                <van-tabbar-item v-for="item in tabbarList" :key="item.title" :to="item.path" :badge="(item.path === '/mainFrame/message' && messageNum) ? messageNum : ''">
                    <span>{{item.title}}</span>
                    <template #icon="props">
                        <img :src="props.active ? item.activeIcon: item.icon" />
                    </template>
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
    import { queryMyUnReadMessNum } from '@/api/platframe/mainFrame/message.js';

    export default {
        data () {
            return {
                tabbarList: [
                    {
                        title: '首页',
                        icon: 'images/home/home.svg',
                        activeIcon: 'images/home/homeActive.svg',
                        path: '/mainFrame/home'
                    },
                    {
                        title: '应用',
                        icon: 'images/home/apply.svg',
                        activeIcon: 'images/home/applyActive.svg',
                        path: '/mainFrame/apply'
                    },
                    {
                        title: '消息',
                        icon: 'images/home/message.svg',
                        activeIcon: 'images/home/messageActive.svg',
                        path: '/mainFrame/message'
                    },
                    {
                        title: '我的',
                        icon: 'images/home/mine.svg',
                        activeIcon: 'images/home/mineActive.svg',
                        path: '/mainFrame/mine'
                    }
                ],
                messageNum: 0,
                timer: null
            }
        },
        created () {
            /* 
                取用户信息：JSON.parse(sessionStorage.getItem('userInfo'))
                           或 this.$store.state.userInfo
            */
            let _userInfo = this.$store.state.userInfo;
            if (!_userInfo || JSON.stringify(_userInfo) == '{}') {
                this.$store.commit('setUserInfo', JSON.parse(sessionStorage.getItem('userInfo')));
            }
            this.getMessageNum();
        },
        mounted () {
            this.timer = setInterval(() => {
                this.getMessageNum();
            }, 30000)
        },
        methods: {
            getMessageNum () {
                queryMyUnReadMessNum().then(res => {
                    if (res && res.code === 1000 && res.data) {
                        this.messageNum = res.data.znxUnReadNum;
                    }
                })
            },
            // 退出应用
            handleClose () {
                this.$Dialog
                    .confirm({
                        title: "是否确定退出应用？",
                    }).then(() => {
                        wx.closeWindow();
                    }).catch(() => { });
            }
        },
        beforeDestroy () {
            clearInterval(this.timer);
            this.timer = null;
        }
    }
</script>

<style scoped lang="less">
    .main {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #eee;
        .mainView {
            position: relative;
            flex: 1;
            overflow: auto;
            .closeImg {
                position: absolute;
                right: 14px;
                top: 12px;
                z-index: 9;
                img {
                    width: 22px;
                    height: 18px;
                }
            }
        }
        .footer {
            position: inherit;
            bottom: 0;
            left: 0;
            width: 100%;
            .van-tabbar--fixed {
                position: relative;
            }
        }
    }
</style>